<template>
  <div style="width: 100%; height: 400px">
    <div
      v-show="!emptyVisible"
      ref="chart"
      style="width: 100%; height: 400px"
    />
    <el-empty v-if="emptyVisible" :description="$t('common.empty_tip')" />
  </div>
</template>

<script>
import * as echarts from 'echarts'
import resize from '@/mixins/resize'

export default {
  mixins: [resize],
  data() {
    return {
      chart: null,
      emptyVisible: false
    }
  },
  computed: {},

  methods: {
    initChart(data) {
      // let data = [
      //   { name: 'Known devices', value: 900, color: '#377DFF' },
      //   { name: 'Unknown Devices', value: 100, color: '#B9D2FF' }
      // ]
      let sum = 0
      const legendData = []
      data.forEach((item) => {
        sum += item.value * 1
        legendData.push(item.name)
      })
      data.push({
        name: '',
        value: sum,
        itemStyle: { normal: { color: '#ffffff' }}
      })
      if (sum === 0) {
        this.emptyVisible = true
      } else {
        this.chart = echarts.init(this.$el)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: function(param) {
              let str = ''
              let c = sum !== 0 ? (param['value'] / sum) * 100 : 0
              c = c.toFixed(2)

              const str1 = param['value'].toFixed(0)
              const reg = str1.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
              const valueTmp = str1.replace(reg, '$1' + ',')

              str = str + c + '%(' + valueTmp + ')'
              return str
            }
          },
          legend: {
            align: 'left',
            bottom: '100px',
            left: 'center',
            data: legendData,
            itemWidth: 8,
            itemHeight: 8,
            icon: 'circle',
            itemGap: 80,
            formatter: function(name) {
              var total = sum
              var target
              var tmp
              for (var i = 0, l = data.length; i < l; i++) {
                if (data[i].name == name) {
                  target = data[i].value

                  const str = target.toFixed(0)
                  const reg = str.indexOf('.') > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g
                  tmp = str.replace(reg, '$1' + ',')
                }
              }
              var percentValue = ((target / total) * 100).toFixed(2)
              var arr = [`{b|${percentValue}% (${tmp})}`, '{a|' + name + '}']
              return arr.join('\n')
            },
            textStyle: {
              rich: {
                a: {
                  fontSize: 12
                },
                b: {
                  fontSize: 14,
                  align: 'left',
                  lineHeight: 25,
                  fontWeight: 800
                }
              }
            }
          },
          series: [
            {
              name: 'pie',
              type: 'pie',
              startAngle: 180,
              showEmptyCircle: false,
              radius: ['70%', '82%'],
              center: ['50%', '60%'],
              data,
              itemStyle: {
                color: (object) => object.data.color,
                borderColor: '#fff',
                borderWidth: 4,
                emphasis: {
                  shadowOffsetX: 0
                }
              },
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              labelLine: {
                show: false
              },
              label: {
                show: false,
                position: 'center'
              }
            }
          ]
        }
        this.chart.setOption(option)
      }
    },
    initData() {}
  }
}
</script>

<style>
</style>
